<template>
  <div class="detail">
    <detailNavbar class="detailbar" @titleclick="titleclick"></detailNavbar>
    <detailSwiper :topImages="topImages"></detailSwiper>
    <detailInfo :itemcontent="itemcontent" :recommends="recommends" id="info"></detailInfo>
    <div class="recommend" ref="recommend">
      <div class="recommend_block">相关推荐</div>
      <a :href="item.item_url" v-for="item in recommends"><img :src="item.image" alt=""></a>
    </div>
    <backTop></backTop>
  </div>
</template>
<script> 
import {getDetailData,getRecommend} from 'network/detail';
import detailSwiper from './childComp/detailSwiper';
import detailNavbar from './childComp/detailNavbar';
import detailInfo from './childComp/info';
import backTop from 'components/common/scroller/backTop';
// import tabbar from 'components/common/tarbar/TarBar';
// import tabbaritem from 'components/common/tarbar/TarBarItem';
export default{
  name:'detail',
  components:{
    detailNavbar,
    detailSwiper,
    detailInfo,
    backTop,
  },
  data(){
    return{
      iid:null,
      topImages:[],
      itemcontent:{},
      recommends:[]
    }
  },
  methods:{
    titleclick(index){
      // console.log(document.getElementById('recommend').offsetHeight);
      switch(index){
        case 0:
          document.documentElement.scrollTop = 0
          break
        case 1:
        document.documentElement.scrollTop = document.getElementById('info').offsetHeight -500
          break
        case 2:
        document.documentElement.scrollTop = document.getElementById('info').offsetHeight + 80
          break
        case 3:
        document.documentElement.scrollTop = document.getElementById('info').offsetHeight + 260
      }
    }
  },
  created(){
    // console.log(123);
    this.iid = this.$route.params.iid
    getDetailData(this.iid).then(res=>{
      // console.log(res);
      this.topImages = res.result.itemInfo.topImages
      this.itemcontent = res
    }),
    getRecommend().then(res=>{
      // console.log(res.data.list);
      this.recommends = res.data.list
    })
  }
}
</script>
<style scoped>
  .detail{
    width: 414px;
    position: relative;
  }
  .detailbar{
    width: 414px;
    position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 9;
  }
  .recommend .recommend_block{
    width: 414px;
    height: 30px;
    padding: 10px 0px;
    text-align: center;
    background-color: var(--color-tint);
  }
  .recommend img{
    width: 190px;
    margin: 10px 5px 0px 10px;
  }
/* .tab-bar{
  position: fixed;
  bottom: 0px;
  width: 414px;
  height: 100px;
  background-color:   pink;
} */

</style>